import Image from 'next/image'
import Link from 'next/link'
import { getSortedPostsData } from '../lib/posts'
import { AppProps } from 'next/app'
import { GetStaticProps } from 'next'
import Head from 'next/head'
interface Props {
  allPostsData: {
    id: string
    date: string
    title: string
  }[]
}
export default function Home({ allPostsData }: Props) {
  const env = process.env.BASE_URL
  const penv = process.env.NEXT_PUBLIC_BASE_URL
  console.log('当前环境变量:' + env)
  return (
    <>
      <Head>
        <link
          href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
          ref="stylesheet"
        ></link>
      </Head>
      <div className=""> 当前环境变量:{penv}</div>
      <Link href={'/firstpage'}>firstpage</Link>
      <Link className="mx-2" href={'/imgs'}>
        imgs
      </Link>
      <section>
        <h2 className="font-semibold">Blog</h2>
        <ul className="">
          {allPostsData.map(({ id, date, title }) => (
            <li className="mt-2" key={id}>
              <Link href={'/posts/' + id}>
                <div className="font-semibold">{title}</div>
              </Link>
              {id}
              <br />
              {date}
            </li>
          ))}
        </ul>
      </section>
    </>
  )
}
export async function getStaticProps() {
  const allPostsData = getSortedPostsData()
  return {
    props: {
      allPostsData,
    },
  }
}
